<template>
  <div class="goods-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
        <el-breadcrumb-item v-else>分类</el-breadcrumb-item>
        <el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-header">
        <div class="category-title">
          <i class="el-icon-menu"></i>
          <span>商品分类</span>
        </div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane
            v-for="item in categoryList"
            :key="item.category_id"
            :label="item.category_name"
            :name="''+item.category_id"
          />
        </el-tabs>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-list-container">
      <transition name="fade" mode="out-in">
        <div v-if="product.length > 0" class="product-grid">
          <MyList :list="product"></MyList>
        </div>
        <div v-else class="empty-state">
          <i class="el-icon-search"></i>
          <h3>抱歉没有找到相关的商品</h3>
          <p>请尝试其他分类或搜索关键词</p>
          <el-button type="primary" @click="resetFilters">查看全部商品</el-button>
        </div>
      </transition>
    </div>

    <!-- 分页 -->
    <div class="pagination-container" v-if="product.length > 0">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import MyList from "@/components/MyList.vue";

export default {
  name: "Goods",
  components: {
    MyList
  },
  data() {
    return {
      categoryList: "", //分类列表
      categoryID: [], // 分类id
      product: "", // 商品列表
      productList: "",
      total: 0, // 商品总量
      pageSize: 15, // 每页显示的商品数量
      currentPage: 1, //当前页码
      activeName: "-1", // 分类列表当前选中的id
      search: "" // 搜索条件
    };
  },
  created() {
    // 获取分类列表
    this.getCategory();
  },
  activated() {
    this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
    this.total = 0; // 初始化商品总量为0
    this.currentPage = 1; //初始化当前页码为1
    // 如果路由没有传递参数，默认为显示全部商品
    if (Object.keys(this.$route.query).length == 0) {
      this.categoryID = [];
      this.activeName = "0";
      return;
    }
    // 如果路由传递了categoryID，则显示对应的分类商品
    if (this.$route.query.categoryID != undefined) {
      this.categoryID = this.$route.query.categoryID;
      if (this.categoryID.length == 1) {
        this.activeName = "" + this.categoryID[0];
      }
      return;
    }
    // 如果路由传递了search，则为搜索，显示对应的分类商品
    if (this.$route.query.search != undefined) {
      this.search = this.$route.query.search;
    }
  },
  watch: {
    // 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
    activeName: function(val) {
      if (val == 0) {
        this.categoryID = [];
      }
      if (val > 0) {
        this.categoryID = [Number(val)];
      }
      // 初始化商品总量和当前页码
      this.total = 0;
      this.currentPage = 1;
      // 更新地址栏链接，方便刷新页面可以回到原来的页面
      this.$router.push({
        path: "/goods",
        query: { categoryID: this.categoryID }
      });
    },
    // 监听搜索条件，响应相应的商品
    search: function(val) {
      if (val != "") {
        this.getProductBySearch(val);
      }
    },
    // 监听分类id，响应相应的商品
    categoryID: function() {
      this.getData();
      this.search = "";
    },
    // 监听路由变化，更新路由传递了搜索条件
    $route: function(val) {
      if (val.path == "/goods") {
        if (val.query.search != undefined) {
          this.activeName = "-1";
          this.currentPage = 1;
          this.total = 0;
          this.search = val.query.search;
        }
      }
    }
  },
  methods: {
    // 重置筛选条件
    resetFilters() {
      this.activeName = "0";
      this.search = "";
      this.categoryID = [];
      this.$router.push({ path: "/goods" });
    },
    // 返回顶部
    backtop() {
      const timer = setInterval(function() {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        const speed = Math.floor(-top / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          top + speed;

        if (top === 0) {
          clearInterval(timer);
        }
      }, 20);
    },
    // 页码变化调用currentChange方法
    currentChange(currentPage) {
      this.currentPage = currentPage;
      if (this.search != "") {
        this.getProductBySearch();
      } else {
        this.getData();
      }
      this.backtop();
    },
    // 向后端请求分类列表数据
    getCategory() {
      this.$axios
        .post("/api/product/getCategory", {})
        .then(res => {
          const val = {
            category_id: 0,
            category_name: "全部"
          };
          const cate = res.data.category;
          cate.unshift(val);
          this.categoryList = cate;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    // 向后端请求全部商品或分类商品数据
    getData() {
      // 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
      const api =
        this.categoryID.length == 0
          ? "/api/product/getAllProduct"
          : "/api/product/getProductByCategory";
      this.$axios
        .post(api, {
          categoryID: this.categoryID,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        })
        .then(res => {
          this.product = res.data.Product;
          this.total = res.data.total;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    // 通过搜索条件向后端请求商品数据
    getProductBySearch() {
      this.$axios
        .post("/api/product/getProductBySearch", {
          search: this.search,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        })
        .then(res => {
          this.product = res.data.Product;
          this.total = res.data.total;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.goods-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 120px);
}

/* 面包屑导航样式 */
.breadcrumb-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.el-breadcrumb {
  font-size: 14px;
}

.el-breadcrumb__inner {
  color: #6c757d;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #495057;
  font-weight: 500;
}

/* 分类标签样式 */
.category-tabs {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  padding: 15px 20px;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.category-title {
  display: flex;
  align-items: center;
  margin-right: 30px;
  font-size: 16px;
  font-weight: 600;
  color: #343a40;
}

.category-title i {
  margin-right: 8px;
  font-size: 18px;
  color: #ff6b6b;
}

/* 深度选择器修改Element UI组件样式 */
.el-tabs--card >>> .el-tabs__header {
  border-bottom: none;
  margin: 0;
}

.el-tabs--card >>> .el-tabs__item {
  border: none !important;
  border-radius: 20px;
  margin-right: 8px;
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
  background-color: #f1f3f5;
  color: #495057;
  transition: all 0.3s;
}

.el-tabs--card >>> .el-tabs__item.is-active {
  background-color: #3a86ff;
  color: white;
  font-weight: 500;
}

.el-tabs--card >>> .el-tabs__item:hover {
  background-color: #e9ecef;
}

.el-tabs--card >>> .el-tabs__item.is-active:hover {
  background-color: #3a86ff;
}

/* 商品列表样式 */
.product-list-container {
  min-height: 600px;
  margin-bottom: 30px;
}

.product-grid {
  display: flex;
  /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
  gap: 20px;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.empty-state i {
  font-size: 60px;
  color: #adb5bd;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 18px;
  color: #343a40;
  margin-bottom: 10px;
}

.empty-state p {
  color: #6c757d;
  margin-bottom: 20px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .goods-container {
    padding: 15px;
  }
  
  .category-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .category-title {
    margin-bottom: 15px;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .el-tabs--card >>> .el-tabs__item {
    padding: 0 12px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .empty-state {
    padding: 40px 15px;
  }
  
  .empty-state i {
    font-size: 40px;
  }
}
</style>